{% load humanize %}
{% load static %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{ topic.topic_title }}</title>
        <link rel="icon" href="{% static 'images/favicon.ico' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'style-forum.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'style-dark.css' %}" />
    </head>
    <body>
        {% include 'header.html' %}

        <div id="main">
            <div class="banner">
                <h2>{{ post.title }}</h2>
                <p>
                    <a href="/user/{{ post.author.email }}">{{ post.author }}</a> <span title="{{ post.created_at }}">发布于{{ post.created_at|naturaltime }}</span>
                    {% if post.is_topped %}
                        <span class="text-red">已置顶</span>
                    {% endif %}
                </p>
            </div>
            <div class="content">
                <ul class="post-list">
                    <li>
                        <div class="post-content" data-markdown="{{ post.content|escape }}"></div>
                    </li>
                    <h3>{{ comments|length }}条回复</h3>
                    {% for comment in comments %}
                        <li>
                            <a href="/user/{{ comment.author.email }}">{{ comment.author.name }}</a>
                            {% if comment.author == post.author %}
                                <span class="text-blue">帖子作者</span>
                            {% endif %}
                            <span title="回复于{{ comment.created_at }}">{{ comment.created_at|naturaltime }}</span>
                            <div class="hr"></div>
                            {{ comment.content|linebreaks }}
                        </li>
                    {% endfor %}
                </ul>
                <form action="comment/" method="post">
                    {% csrf_token %}
                    <p style="margin-top: 0;">回复</p>
                    <label for="content">内容</label>
                    <textarea type="text" name="content" id="content" maxlength="4096"></textarea>
                
                    <input type="submit" value="发布" />
                </form>
            </div>
        </div>
        <script src="{% static 'forum.js' %}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.0/marked.min.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const postContents = document.querySelectorAll('.post-content');

                postContents.forEach(postContent => {
                    const markdownText = postContent.getAttribute('data-markdown');
                    const htmlContent = marked.parse(markdownText);
                    postContent.innerHTML = htmlContent;
                });
            });
        </script>
    </body>
</html>